import React from 'react';
import ReactDOM from 'react-dom/client';
const ele = <div>
    <h1>React</h1>
</div>
console.log(ele);
// const ele = {type:'div',props:{children:'react'}}
const myReactDOM = {
    createRoot(root) {
        function ReactDOMRoot(internalRoot) {
            this._internalRoot = internalRoot;
        }
        ReactDOMRoot.prototype.render = function (vdom) {
            const { type, props: { children } } = vdom;//对象解构
            const ele = document.createElement(type);
            if (typeof children === 'string') {
                ele.innerHTML = children;
            } else {
                myReactDOM.createRoot(ele).render(children);
            }
            this._internalRoot.containerInfo.appendChild(ele);
        }
        return new ReactDOMRoot({
            containerInfo: root
        });
    }
}
const myRoot = myReactDOM.createRoot(
    document.getElementById('root')
)
myRoot.render(ele);

// const root = ReactDOM.createRoot(
//     document.getElementById('root')
// );
// root.render( ele );



// 模块化
// 组件化(SPA 单页应用)
// JSX语法、插值表达式
// 虚拟DOM